<template>
  <div id="Task">
    <Filters
      block
      :form="searchForm"
      :filterData="filterData"
      @confirm="changePage(1)"
    />
    <div class="container">
      <DataTable
        rowKey="adminId"
        :btns="btns"
        :tableData="Data"
        :tableColumn="tableColumn"
        :pageConfig="pageConfig"
        :rowSelection="rowSelection"
        @refresh="getList"
      />
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
import util from '@/util/util';
import { ADMIN_ROLE_EXPORT } from '@/api/global';

@Component
export default class Task extends Vue {
  searchForm: any = {
    searchValue: '',
    date: [],
    state: undefined
  }
  btns: any[] = [
    {
      label: '新增',
      icon: 'add',
      callback: () => this.$router.push({ path: '/systemManage/roleManage/operate', query: { _alias: 'add' } })
    },
    {
      label: '删除',
      callback: this.handleBatch
    },
    {
      label: '导出',
      icon: 'export',
      callback: this.exportList
    }
  ]
  Data: any[] = []
  tableColumn: any = {
    roleCode: {
      label: '角色编码',
      minWidth: 120
    },
    roleName: {
      label: '角色名称',
      minWidth: 120
    },
    createTime: {
      label: '创建时间',
      minWidth: 100
    },
    roleStatus: {
      label: '状态',
      minWidth: 170,
      type: 'switch',
      callback: (row: any) => this.changeStatus(row)
    },
    action: {
      label: '操作',
      width: 230,
      template: [
        {
          tag: 'router-link',
          text: '修改',
          path: '/systemManage/roleManage/operate',
          query: {
            _alias: 'edit',
            roleId: ''
          }
        },
        {
          tag: 'a',
          text: '删除',
          callback: (row: any) => this.delHandle(row)
        }
      ]
    }
  }
  selectedRowKeys: any = []
  pageConfig: any = {
    current: 1,
    total: 10,
    pageSize: 10,
    onChange: this.changePage
  }
  get filterData () {
    return {
      state: {
        label: '角色状态',
        type: 'select',
        template: {
          placeholder: '请选择状态',
          clearable: true,
          filterable: true,
          options: [
            {
              label: '全部',
              value: ''
            },
            {
              label: '启用',
              value: 1
            },
            {
              label: '禁用',
              value: 0
            }
          ]
        }
      },
      date: {
        label: '创建时间',
        type: 'daterange',
        template: {
          clearable: true
        }
      },
      searchValue: {
        label: '关键词',
        type: 'input',
        template: {
          placeholder: '请输入关键词',
          clearable: true
        }
      }
    }
  }
  selectArr: any = []

  get rowSelection () {
    return {
      selectedRowKeys: this.selectedRowKeys,
      onChange: this.changeSelection
    };
  }
  init () {
    this.getList()
  }
  getSearchForm () {
    let { searchForm } = this
    let { current, pageSize } = this.pageConfig
    let form = Object.assign({ page: current, size: pageSize }, searchForm);
    let [ startTime, endTime ] = this.$util.formatDate(form.date)
    Object.assign(form, {
        startTime,
        endTime
    });
    delete form.date
    return form;
  }
  getList () {
    let data = this.getSearchForm()
    this.$api.adminRoleRoleListFetch(data).then((res: any) => {
      res.data.records.map((item:any)=>{
        if(item.roleStatus==1){
          item.roleStatus = true
        }else{
          item.roleStatus = false
        }
      })
      this.Data = res.data.records
      
      this.pageConfig.total = res.data.total
      if (!this.Data.length && this.pageConfig.current > 1) {
        --this.pageConfig.current
        this.getList()
      }
    })
  }
  changePage (val: number) {
    this.pageConfig.current = val
    this.getList()
  }
  searchHandle () {
    this.pageConfig.current = 1
    this.getList()
  }
  delHandle ({ roleId }: any) {
    let data = { roleId }
    this.$api.adminRoleRoleDeleteFetch(data).then((res: any) => {
      this.$message.success('删除成功')
      this.getList()
    })
  }
  changeStatus (row: any) {
    let { roleId, status } = row
    this.$api
      .adminStatusFetch({ roleId, status })
      .then((res: any) => {
        this.$message.success(`${status ? '正常' : '冻结'}成功`)
        this.getList()
      })
  }
  // 选择上架
  changeSelection (selectedRowKeys: any, selectedRows: any[]) {
    this.selectedRowKeys = selectedRowKeys;
    this.selectArr = selectedRows
  }
  // 批量删除
  handleBatch () {
    if (!this.selectArr.length) return this.$message.error('请选择数据')
    let roleId = this.selectArr.map((item: any) => item.roleId).join(',')
    let data = { roleId }
    this.$confirm({
      title: '提示',
      content: '确定删除？',
      onOk: () => {
        this.$api.adminRoleRoleDeleteFetch(data).then((res: any) => {
            this.$message.success('删除成功')
            this.selectedRowKeys = []
            this.selectArr = []
            this.getList()
        });
      }
    })
  }
  // 导出
  exportList () {
    let form = this.getSearchForm();
    util.exportExcelFun(form, ADMIN_ROLE_EXPORT);
  }
}
</script>

<style lang="scss">
</style>
